
import Fetch from '../modules/fetch'
import $ from 'jquery'

class HeaderComponent extends React.Component {   
    constructor(props,context){
        super(props,context)

        this.state={
            navDataList:[],
			Hot_Words:[],
            swiper:null,
            nick:''
        }
    }


	componentWillMount(props,state){
		this.getHotWords()
		this.check_nick()
	}
	
	
	
	componentDidMount(props,state){
		
		
		this.state.swiper=new Swiper(".header-nav>.swiper-container",{
//          freeMode : false,
            slidesPerView : 1,
            freeModeSticky : false ,
        })
		$('.header-nav__downIcon').click(function(){
					$(".header-hideNav").slideDown();
		})
		$('.header-hideNav__upIcon').click(function(){
					$(".header-hideNav").slideUp();
		})
	}
	getHotWords(){
		let that=this
		Fetch.Get('json/header_nav.json',{}).then(res=>{return res.json()}).then(json=>{

		//	            that.setState({navDataList:json})
				that.setState({Hot_Words:json.data})
			})

	}
	showHotWords(){
		let that = this
		let arr = []
		this.state.Hot_Words.forEach((item,i)=>{

			arr.push(<li>{item["i"+(i+1)]}</li>)
		})
		return arr;
	}
	
	check_nick(){
		var Nick;
		if(localStorage.getItem('aaa')){
			Nick = JSON.parse(localStorage.getItem('aaa')).nick;
		}
		
		if(Nick!=''){
			this.setState({
				nick:Nick
			})			
		}else{
			
		}
	}
	
	changeTowhat(){
		$(location).attr('href', '#/reg');
	}
	changeTowhat5(){
		$(location).attr('href', '#/tuijian');
	}
	changeTowhat6(){
		$(location).attr('href', '#/sec');
	}
	
    render(){

        return (
            <div className="header-swipper">
            	<div className="header-top">
		    		<img src="./lib/images/logo.png" alt="" className="header-top__logo"/>
		    		<span className='_hide'>{this.state.nick?this.state.nick+'，你好':''}</span>
		    		<div className="header-top__right">
		    			<img src="./lib/images/tv_icon.gif" alt="" className="userBox_pic"/>
		    			<p onClick={this.changeTowhat}>注册</p>
		    		</div>
		    	</div>
		    	<div className='header-nav'>
					<div className="swiper-container header-nav__box">
						<div className="swiper-wrapper">
							<div className="swiper-slide abc">首页</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>动画</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat6}>番剧</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>国创</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat6}>音乐</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>舞蹈</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat6}>科技</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>游戏</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat6}>娱乐</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>鬼畜</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>电影</div>
							<div className="swiper-slide abc" onClick={this.changeTowhat5}>电视剧</div>
						</div>
					</div>
                    <div className="header-nav__downIcon">v</div>
			    </div>
		    	
		    	<div className='header-hideNav'>
                    <ul className='header-hideNav__list'>
                        {this.showHotWords()}
                    </ul>
                    <p className='header-hideNav__upIcon'>∧</p>
				</div>
		    	
            </div>
        )
    }
    
    
}
//定义默认属性
HeaderComponent.defaultProps={

}



export default HeaderComponent